<template>
  <div id="views" class="views">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import * as Cesium from 'cesium/Build/Cesium/Cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

Cesium.buildModuleUrl.setBaseUrl('static/Cesium/')
export default {
  name: '3D Models',
  mounted () {
    // eslint-disable-next-line no-unused-vars
    var viewer = new Cesium.Viewer('cesiumContainer', {
      // animation: false, // 是否显示动画控件
      // baseLayerPicker: false, // 是否显示图层选择控件
      // homeButton: false, // 是否显示home控件
      // geocoder: true, // 是否显示地名查找控件
      // timeline: false, // 是否显示时间线控件
      // sceneModePicker: false, // 是否显示投影方式控件
      // navigationHelpButton: false, // 是否显示帮助信息控件
      infoBox: false, // 是否显示点击要素之后显示的信息
      // fullscreenButton: false, // 是否显示全屏控件
      // vrButton: false, // 是否显示vr控件
      selectionIndicator: false, // 是否显示点击要素之后显示选中框
      shadows: true,
      shouldAnimate: true
    })

    function createModel (url, height) {
      viewer.entities.removeAll()

      var position = Cesium.Cartesian3.fromDegrees(
        -123.0744619,
        44.0503706,
        height
      )
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      )

      var entity = viewer.entities.add({
        name: url,
        position: position,
        orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000
        }
      })
      viewer.trackedEntity = entity
    }

    var options = [
      {
        text: 'Aircraft',
        onselect: function () {
          createModel(
            'static/SampleData/models/CesiumAir/Cesium_Air.glb',
            5000.0
          )
        }
      },
      {
        text: 'Drone',
        onselect: function () {
          createModel(
            'static/SampleData/models/CesiumDrone/CesiumDrone.glb',
            150.0
          )
        }
      },
      {
        text: 'Ground Vehicle',
        onselect: function () {
          createModel(
            'static/SampleData/models/GroundVehicle/GroundVehicle.glb',
            0
          )
        }
      },
      {
        text: 'Hot Air Balloon',
        onselect: function () {
          createModel(
            'static/SampleData/models/CesiumBalloon/CesiumBalloon.glb',
            1000.0
          )
        }
      },
      {
        text: 'Milk Truck',
        onselect: function () {
          createModel(
            'static/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb',
            0
          )
        }
      },
      {
        text: 'Skinned Character',
        onselect: function () {
          createModel(
            'static/SampleData/models/CesiumMan/Cesium_Man.glb',
            0
          )
        }
      },
      {
        text: 'Draco Compressed Model',
        onselect: function () {
          createModel(
            'static/SampleData/models/DracoCompressed/CesiumMilkTruck.gltf',
            0
          )
        }
      }
    ]

    options[0].onselect()

    // Sandcastle.addToolbarMenu(options)
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
